.wrap_map{
  position: relative;
  height: 100vh;
  width: 100vw;
  width: 100%;
  overflow: hidden;
  background-color: #50B668;
}
.pop_ticket{
  position: fixed;
  left: 15px;
  bottom: 15px;
  right: 15px;
  background-color: #fff;
  line-height: 45px;
  border-radius: 24px;
  color: #252729;
  font-size: 16px;
  padding-left: 15px;
  padding-right: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow:0px 2px 8px 0px rgba(0,0,0,0.3);

  .icon-zsticket{
    display: inline-block;
    color: #5093EB;
    vertical-align: -3px;
    font-size: 23px;
    margin-right: 6px;
  }
  .text{
    display: inline;
    font-size: 16px;
  }
  .link{
    position: absolute;
    top: 0px;
    right: 8px;
    color: #6E747A;
    font-size: 14px;

    .iconfont{
      margin-left: -3px;
      vertical-align: -1px;
    }
  }

  .btn_em{
    position: absolute;
    top: 8px;
    right: 8px;
    /* width: 82px; */
    height:30px;
    line-height: 30px;
    padding: 0 15px;
    background-color: #5093EB;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
  }
}
.map_type{
  position: absolute;
  top: 45px;
  right: 15px;
  width: 42px;
}
.map_type .btn_item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow:0px 2px 8px 0px rgba(0,0,0,0.3);
  border-radius:7px;
  color: #6E747A;
  font-size: 10px;
  text-align: center;
  line-height: 12px;
}
.map_type .btn_item .iconfont{
  display: block;
  font-size: 20px;
  margin: 0 auto;
}
.map_type .current{
  color: #5093EB;
}
.mod_tips{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 6px 25px 4px 15px;
  background-color: #5093EB;
  color: #fff;
  font-size: 13px;
  line-height: 20px;

  .text{
    display: inline-block;
    width: 90%;
    vertical-align: top;
  }
}
.mod_tips .icon_wave{
  display: inline-block;
  color: #fff;
  vertical-align: -2px;
  margin-right: 5px;
  width: 15px;
  height: 15px;
}
.mod_tips .btn_close{
  position: absolute;
  right: 6px;
  top: 0px;
  width: 30px;
  height: 30px;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mod_tips .btn_close .iconfont{
  display: inline-block;
  color: #fff;
  vertical-align: 0px;
  margin-right: 0;
  font-size: 15px;
}

.mylocation{
  position: absolute;
  bottom: 76px;
  right: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  width: 42px;
  height: 42px;
  padding: 0 0 2px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow:0px 2px 8px 0px rgba(0,0,0,0.3);
  border-radius:7px;
  color: #6E747A;
  font-size: 10px;
  text-align: center;
  line-height: 12px;

  .icon{
    display: block;
    width: 23px;
    height: 23px;
    margin: auto;
  }
}


.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}


.pop_box{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 182px;
  margin-left: -150px;
  margin-top: -91px;
  background-color: #fff;
  border-radius: 7px;
  z-index: 200;
  box-shadow:0px 0px 14px 0px rgba(0,0,0,0.12);

  .pop_inner{
    padding: 10px 15px;
  }

  .pop_close{
    position: absolute;
    top: -38px;
    right: 0px;
    width: 30px;
    height: 30px;
    border: 1px solid #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    color: #fff;

    &:after{
      content: '';
      position: absolute;
      left: 14px;
      top: 28px;
      width: 1px;
      height: 12px;
      background-color: #fff;
    }
  }

  .title{
    display: block;
    font-size: 17px;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .title_narrow{
    padding-right: 60px;
  }
  .btn_checkin{
    position: absolute;
    right: 10px;
    top: 11px;
    color: #5093EB;
    font-size: 16px;
    .iconfont{
      margin-right: 5px;
      font-size: 23px;
      vertical-align: -4px;
    }
  }
  .content{
    position: relative;
    height: 65px;
    padding-left: 75px;
    margin-top: 12px;

    .pic{
      position: absolute;
      left: 0;
      top: 0;
      width: 65px;
      height: 65px;
      border-radius: 3px;
    }

    .desc{
      position: relative;
      display: block;
      font-size: 14px;
      line-height: 21px;
      height: 63px;
      overflow: hidden;
      text-align: justify;

      .iconfont{
        margin-left: -5px;
        vertical-align: -1px;
        color: #5093EB;
      }
    }

    .desc_more{
      position: absolute;
      right: 0;
      bottom: 0;
      padding-left: 12px;
      color: #5093EB;
      background: linear-gradient(to right, rgba(255,255,255,0) 0px, #fff 10px);
    }
  }

  .btn_line{
    margin-top: 15px;
    text-align: center;
    height: 37px;
    overflow: hidden;

    .btn_large{
      width: 105px;
      margin: 0 8px;
      .iconfont{
        margin-right: 5px;
        font-size: 18px;
        vertical-align: -3px;
      }
    }
  }

}

.pop_box_nobtn{
  height: 128px;
  margin-top: -64px;
  .btn_line{
    display: none;
  }
  .content .pic{
    background-color: transparent;
  }
}

// 地图
.map_container{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .map_pic{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
  }
  .map_view{
    position: absolute;
    left: 0;
    top: 0;
    height: 100vh;
    width: 163vh;
    // transform: translateZ(0);
  }
}

.pin_info{
  position: absolute;
  left: 100px;
  top: 100px;
  // transition: transform 0.8s ease both;
  transform: scale(1) translateZ(0);

  .pin_icon{
    position: relative;
    width: 40px;
    height: 44px;
    margin: 0 auto 3px;
    // background-color: #fff;
    // border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon_bg,
    .icon_custom{
      position: absolute;
      top: 0;
      left: 0;
      width: 39px;
      height: 44px;
    }

    .icon_custom{
      display: none;
      width: 41px;
      height: 50px;
    }


    .iconfont{
      position: absolute;
      top: 9px;
      left: 10px;
      line-height: 1;
      font-size: 20px;
      color: #5093EB;
    }
  }
  .pin_title{
    position: absolute;
    top: 47px;
    left: 50%;
    transform: translate(-50%, 0);
    line-height: 24px;
    color: #252729;
    font-size: 12px;
    background-color: #fff;
    padding: 0 10px;
    border-radius: 12px;
    white-space: nowrap;
  }
}

.pin_info_main{
  .pin_title{
    line-height: 22px;
    border: 1px solid #5093EB;
    color: #5093EB;
  }
}

.pin_info_custom{
  z-index: 5;
  .icon_bg,
  .iconfont{
    display: none;
  }
  .pin_icon{
    width: 50px;
    height: 50px;
  }
  .pin_icon .icon_custom{
    display: block;
    margin: auto;
  }
}
//.pin_mine{
//  position: absolute;
//  width: 18px;
//  height: 18px;
//  border: 3px solid #fff;
//  background-color: #5093EB;
//  border-radius: 100%;
//}
.pin_mine{
  position: absolute;
  width: 30px;
  height: 30px;

}
.pin_mine img{
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-bottom: 7.5px;
}
.pin_info_special{
  .pin_icon{
    width: 30px;
    .icon_bg{
      display: none;
    }
    .iconfont{
      left: 0;
      padding: 3px 3px 3px 3px;
      background-color: #5093EB;
      border-radius: 100%;
      border: 2px solid #fff;
      color: #fff;
      font-size: 19px;
      box-shadow:0px 2px 8px 0px rgba(0,0,0,0.3);
    }
  }
}


.pop_mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 120;
}

.pop_toast{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  .toast_inner{
    display: block;
    font-size: 14px;
    background-color: rgba(#0D0D0D, 0.8);
    border-radius: 7px;
    padding: 13px 15px;
    .iconfont{
      display: inline-block;
      font-size: 18px;
      color: #fff;
      vertical-align: -3px;
      margin-right: 3px;
    }
    .toast_text{
      display: inline-block;
      font-size: 14px;
      color: #fff;
    }
  }

}



// 弹窗出现时，隐藏其他元素
.hide_pin{
  .pin_mine,
  .map_type,
  .pin_info{
    visibility: hidden;
  }
}


.hide{
  visibility: hidden !important;
}

// 登陆浮层
.pop_modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  background-color: rgba( #000000, 0.5);


  .pop_modal_inner{
    display: block;
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 7px;

    .modal_title{
      line-height: 26px;
      font-size: 17px;
      color: #252729;
      text-align: center;
    }

    .modal_desc{
      margin-top: 6px;
      line-height: 20px;
      font-size: 14px;
      color: #252729;
      text-align: center;
    }

    .modal_btns{
      margin-top: 15px;
      text-align: center;

      .btn_normal,
      .btn_em{
        display: inline-block;
        width: 105px;
        line-height: 36px;
        font-size: 14px;
        color: #252729;
        background-color: #F2F4F5;
        vertical-align: top;
        border-radius: 18px;
      }
      .btn_em{
        margin-left: 15px;
        background-color: #5093EB;
        color: #fff;
      }
    }
  }
}
